<template>
  <el-container class="header">
    <el-row type="flex" class="header-bar-container">
      <div class="icon-home" @click="jumpTo('/index')">
        <el-icon :size="40">
          <House/>
        </el-icon>
      </div>
      <div class="my-logo-container">
        <img class="my-logo" :src="logo" alt="logo"/>
      </div>
      <div class="icon-search" @click="jumpTo('/search')">
        <el-icon :size="40">
          <Search/>
        </el-icon>
      </div>
    </el-row>
  </el-container>
</template>

<script lang="ts" setup>
import {useRouter} from "vue-router/dist/vue-router";
import {Search, House} from "@element-plus/icons-vue";
import logo from "@/assets/icon_edit.png";

const router = useRouter();
const jumpTo = (path: string) => {
  router.push(path);
};
</script>

<style scoped lang="less">
.header {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: center;
}

.icon-home {
  color: #0096fa;
  //left: 0;
  //position: fixed;
  //margin: 0 auto;
  //text-align: center;
}

.icon-search {
  color: #0096fa;
  //right: 0;
  //position: fixed;
  //margin: 0 auto;
  //text-align: center;
}

.my-logo-container {
  //margin: auto;
  //position: fixed;
  .my-logo {
    height: 40px;
    width: auto;
  }

  //margin: 0 auto;
  //text-align: center;
}

.header-bar-container {
  width: 1100px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

@media screen and (max-width: 1100px) {
  .header-bar-container {
    width: 800px;
  }
}

@media screen and (max-width: 800px) {
  .header-bar-container {
    width: 600px;
  }
}

@media screen and (max-width: 600px) {
  .header-bar-container {
    width: 100%;
  }
}
</style>
